<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[16, 16]">
      <!-- 顶部列表 -->
      <a-col :span="24" class="module-list">
        <a-row :gutter="[16, 16]">
          <!-- 新增学员 -->
          <a-col :span="12">
            <div class="module-in module-in01">
              <a-page-header :ghost="false" :title="monthTitle">
                <template slot="extra">
                  <a-month-picker
                    v-model="allMonthStudent.createTime"
                    placeholder="请选择月份"
                    @change="getMothData()"
                  />

                  <a-icon type="more" />
                </template>
              </a-page-header>

              <a-list
                :grid="{ gutter: 8, column: 4 }"
                :data-source="monthData"
                class="list-totality"
                :loading="listLoading"
              >
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-card>
                    <a-row>
                      <a-col :span="12">
                        <div
                          style="
                            background-color: rgb(84, 112, 198);
                            text-align: center;
                            width: 60px;
                            height: 60px;
                            border-radius: 30px;
                            line-height: 60px;
                            align-items: center;
                          "
                        >
                          <a-icon
                            :type="item.icon"
                            style="
                              color: #ffffff;
                              font-size: 40px;
                              margin-top: 7.5px;
                            "
                          />
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <a-row>
                          <a-col
                            ><p>{{ item.name }}</p></a-col
                          >
                        </a-row>
                        <a-row>
                          <a-col
                            ><span>{{ item.value }} </span></a-col
                          >
                        </a-row>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-list-item>
              </a-list>
            </div>
          </a-col>
          <!-- 学员总数 -->
          <a-col :span="12">
            <div class="module-in module-in01">
              <a-page-header :ghost="false" :title="allTitle">
                <template slot="extra">
                  <a-month-picker
                    placeholder="年份选择"
                    @change="getStudentByYear"
                    v-model="student.createTime"
                  />
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <a-list
                :grid="{ gutter: 8, column: 4 }"
                :data-source="staOptions"
                class="list-totality"
                :loading="cardLoading"
              >
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-card>
                    <a-row>
                      <a-col :span="12">
                        <div
                          style="
                            background-color: rgb(84, 112, 198);
                            text-align: center;
                            width: 60px;
                            height: 60px;
                            border-radius: 30px;
                            line-height: 60px;
                            align-items: center;
                          "
                        >
                          <a-icon
                            :type="item.icon"
                            style="
                              color: #ffffff;
                              font-size: 40px;
                              margin-top: 7.5px;
                            "
                          />
                        </div>
                      </a-col>
                      <a-col :span="12">
                        <a-row>
                          <a-col
                            ><p>{{ item.name }}</p></a-col
                          >
                        </a-row>
                        <a-row>
                          <a-col
                            ><span>{{ item.value }} </span></a-col
                          >
                        </a-row>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-list-item>
              </a-list>
            </div>
          </a-col>
          <!-- 组件API搜索 -->

          <!-- 趋势图 -->

          <!-- 帮助文档 -->
        </a-row>
      </a-col>
      <a-col :span="24" class="module-list">
        <a-row :gutter="[16, 16]">
          <!-- 学员占比饼图 -->
          <a-col :span="12">
            <div class="module-in module-in011">
              <a-page-header :ghost="false" :title="allStaTitle">
                <template slot="extra">
                  <a-month-picker
                    placeholder="年份选择"
                    @change="getStaStudent"
                    v-model="studenter.createTime"
                  />
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <div class="Echarts" style="height: 525px">
                <div
                  id="main"
                  style="width: 700px; height: 500px; text-align: center"
                ></div>
              </div>
            </div>
          </a-col>
          <!-- 学员人数增长折线图 -->
          <a-col :span="12">
            <div class="module-in module-in011">
              <a-page-header :ghost="false" :title="yearTtile">
                <template slot="extra">
                  <a-month-picker
                    placeholder="请选择年份"
                    v-model="allStudent.createTime"
                    @change="getYearData()"
                  />
                  <a-icon type="more" />
                </template>
              </a-page-header>
              <div class="Echarts" style="height: 525px">
                <div
                  id="main2"
                  style="width: 700px; height: 500px; text-align: center"
                ></div>
              </div>
            </div>
          </a-col>
          <!-- 组件API搜索 -->

          <!-- 趋势图 -->

          <!-- 帮助文档 -->
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 月度新增标题
      monthTitle: "",
      // 总计标题
      allTitle: "",
      // 总计占比标题
      allStaTitle: "",
      // 总计年度标题
      yearTtile: "",
      visible: false,
      data: [],
      monthData: [],
      fromOptions: [],
      staOptions: [],
      dateFormat: "YYYY-MM-DD",
      compile: false,
      len: [],
      selectMoth: undefined,
      // 卡片加载
      listLoading: false,
      // 总数卡片
      cardLoading: false,
      allMonthStudent: {
        createTime: undefined,
      },
      allStudent: {
        createTime: undefined,
      },
      student: {
        createTime: undefined,
      },
      studenter: {
        createTime: undefined,
      },
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
    };
  },
  created() {
    this.allList();

    this.yearList();

    this.monthList();

    this.monthTitle =
      new Date().getFullYear() +
      "年" +
      (new Date().getMonth() + 1) +
      "月" +
      "学员新增统计";

    this.allTitle = new Date().getFullYear() + "年" + "学员总数统计";

    this.allStaTitle = new Date().getFullYear() + "年" + "学员占比分析图";

    this.yearTtile = new Date().getFullYear() + "年" + "学员年度趋势分析图";
  },
  watch: {},
  mounted() {},
  components: {
    // lineRadar
  },
  methods: {
    // 学生年度饼图日期查询

    myEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    myEcharts2(data, len) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main2"));

      // 指定图表的配置项和数据
      this.option.series = data;
      this.option.legend.data = len;
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="less">
@import "../typical-home.less";
</style>
